﻿<common:LayoutAwarePage
    x:Class="wBudget.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:wBudget.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:DatePicker="using:DatePicker" xmlns:ctrl="using:DatePicker.Controls"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="CategoriesViewSource"
            Source="{Binding Items}"/>
        <CollectionViewSource
            x:Name="EntriesViewSource"
            Source="{Binding Items}"/> 
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="PrimaryColumn" Width="400"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- Back button and page title -->
        <Grid x:Name="TitlePanel">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="PageTitle" Padding="60, 0, 0, 0" Grid.Column="1" Text="Categories" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <!-- Vertical scrolling item list -->
            <ListView
                x:Name="ItemListView"
                AutomationProperties.AutomationId="ItemsListView"
                AutomationProperties.Name="Items"
                TabIndex="1"
                Grid.Row="0"
                Margin="-10,-10,0,0"
                Padding="60,0,0,60"
                SelectionMode="Multiple"
                ItemsSource="{Binding Source={StaticResource CategoriesViewSource}}"
                IsSwipeEnabled="True"
                SelectionChanged="ItemListViewSelectionChanged"
                ItemTemplate="{StaticResource Standard80ItemTemplate}"/>
            
            <Button x:Name="AddCategoryButton" Margin="5, 5" 
                    Grid.Row="1" Height="60" Width="390" Click="addCategoryButtonClick">Add Category</Button>
        </Grid>

        <!-- Title -->
        <TextBlock x:Name="ActionTitle" Grid.Column="1" Padding="5, 0, 0, 0" Text="Details" Style="{StaticResource PageHeaderTextStyle}"/>

        <!-- Details for selected item -->
        <Grid x:Name="ItemDetaiScrollViewGrid" Column="1" Row="1">
            <Grid x:Name="ItemDetailGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3.4*"/>
                    <ColumnDefinition Width="0.6*"/>
                </Grid.ColumnDefinitions>
                <Grid Margin="0,5,0,0" Grid.ColumnSpan="2" Width="{Binding ActualWidth, ElementName=entriesDetailsGrid}">
                    <Grid Height="Auto" HorizontalAlignment="Stretch" Margin="10,0,20,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2.4*"/>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="0.6*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Date" Style="{StaticResource TitleTextStyle}" Grid.Column="1" TextAlignment="Center"/>
                        <TextBlock Text="Amount" Style="{StaticResource TitleTextStyle}" Grid.Column="2" TextAlignment="Right"/>
                        <TextBlock Text="Description" Style="{StaticResource TitleTextStyle}" TextAlignment="Left"/>
                    </Grid>
                </Grid>
                <Grid Grid.Row="1" Grid.ColumnSpan="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.8*" />
                        <RowDefinition Height="0.1*" />
                        <RowDefinition Height="70" />
                    </Grid.RowDefinitions>
                        <ListView 
                            x:Name="EntriesDetailView"
                            TabIndex="2"
                            Margin="5,5,0,0"
                            SelectionMode="None"
                            HorizontalAlignment="Stretch"
                            ItemsSource="{Binding Source={StaticResource EntriesViewSource}}"
                            IsSwipeEnabled="True" >
                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                </Style>
                            </ListView.ItemContainerStyle>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Height="Auto" Margin="0" x:Name="entriesDetailsGrid">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="2.4*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="0.6*" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{Binding Date}" Style="{StaticResource BodyTextStyle}" Grid.Column="1" TextAlignment="Center"/>
                                    <TextBlock Text="{Binding FormattedAmountString}" Style="{StaticResource BodyTextStyle}" Grid.Column="2" TextAlignment="Right"/>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="30"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>
                                            <Border Grid.Column="0" Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="30" Height="30" >
                                                <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                                            </Border>
                                            <TextBlock Grid.Column="1" Padding="5, 0, 0, 0" Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" TextAlignment="Left"/>
                                        </Grid>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    <Grid Grid.Row="1" Margin="10,5,20,0" Width="{Binding ActualWidth, ElementName=entriesDetailsGrid}" HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3.4*" />
                            <ColumnDefinition Width="0.6*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Result:" VerticalAlignment="Center" Style="{StaticResource TitleTextStyle}" TextAlignment="Right" Margin="0, 0, 10, 0"/>
                        <TextBlock x:Name="SumField" Grid.Column ="1" Text="%result%" TextAlignment="Right"  Style="{StaticResource TitleTextStyle}" VerticalAlignment="Center" Margin="0,0,6,0"/>
                    </Grid>
                    <Button Grid.Row="2" Margin="5, 5" x:Name="newEntry" Content="Add Entry" Height="60" Width="390" VerticalAlignment="Bottom" Click="addEntryButtonClick" />         
                </Grid>
            </Grid>
        </Grid>

        <Grid x:Name="NewCategoryForm"
              Visibility="Collapsed"
              Grid.Column="1"
              Grid.Row="1"
              Height="300"
              Width="500"
              VerticalAlignment="Top"
              HorizontalAlignment="Left"
              Margin="20, 0, 0, 20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="200" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Name:" HorizontalAlignment="Left" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" />
            <TextBox x:Name="CategoryName" HorizontalAlignment="Left" Grid.Column="1" TextWrapping="NoWrap" Height="30" Width="150" VerticalAlignment="Center" />
            <TextBlock Grid.Row="1" Text="Image:" HorizontalAlignment="Left" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" />
            <Button Content="Select Image" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Click="SelectImage" />
            <Image x:Name="selectedImage" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" Width="200" Height="200" />
            <Button Content="Save" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Click="AddCategory" />
            <Button Content="Cancel" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" Click="CancelClick"/>
        </Grid>

        <Grid x:Name="NewEntryForm"
              Grid.Column="1"
              Grid.Row="1"
              Height="400"
              Width="500"
              VerticalAlignment="Top"
              HorizontalAlignment="Left"
              Visibility="Collapsed"
              Margin="20, 0, 0, 20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.7*" />
                <RowDefinition Height="0.7*" />
                <RowDefinition Height="0.7*" />
                <RowDefinition Height="0.7*" />
                <RowDefinition Height="0.7*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Description:" HorizontalAlignment="Left" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" />
            <TextBox x:Name="EntryDescription" HorizontalAlignment="Left" Grid.Column="1" TextWrapping="NoWrap" Height="30" Width="300" VerticalAlignment="Center" />
            <TextBlock Text="Amount:" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" />
            <TextBox x:Name="EntryAmount" Grid.Row="1" HorizontalAlignment="Left" Grid.Column="1" TextWrapping="NoWrap" Height="30" Width="100" VerticalAlignment="Center" />
            <TextBlock Text="Type:" Grid.Row="2" HorizontalAlignment="Left" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" />
            <ComboBox x:Name="EntryType" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="120"/>
            <TextBlock Text="Cost/pc (€):" Grid.Row="3" HorizontalAlignment="Left" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" />
            <TextBox x:Name="CostPerPiece" Grid.Row="3" HorizontalAlignment="Left" Grid.Column="1" TextWrapping="NoWrap" Height="30" Width="100" VerticalAlignment="Center" />
            <Button Content="Save" Grid.Column="1" Grid.Row="5" HorizontalAlignment="Left" Click="AddEntry" />
            <Button Content="Cancel" Grid.Column="1" Grid.Row="5" HorizontalAlignment="Right" Click="CancelClick"/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscapeOrWide"/>

                <!-- Filled uses a simpler list format in a narrower column -->
                <VisualState x:Name="FilledOrNarrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="420"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Standard80ItemTemplate}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="60,0,66,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The page respects the narrower 100-pixel margin convention for portrait, and the page
                    initially hides details to show only the list of items
                -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="100,0,90,60"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    When an item is selected in portrait the details display requires more extensive changes:
                     * Hide the master list and the column is was in
                     * Move item details down a row to make room for the title
                     * Move the title directly above the details
                     * Adjust margins and padding for details
                 -->
                <VisualState x:Name="FullScreenPortraitDetail">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetailGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="100,0,90,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the page
                    initially hides details to show only the list of items
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="320"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Standard80ItemTemplate}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20,0,0,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    When snapped and an item is selected the details display requires more extensive changes:
                     * Hide the master list and the column is was in
                     * Move item details down a row to make room for the title
                     * Move the title directly above the details
                     * Adjust margins and padding for details
                     * Use a different font for title and subtitle
                     * Adjust margins below subtitle
                 -->
                <VisualState x:Name="SnappedDetail">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailTitlePanel" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailTitlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20,0,20,0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemDetailGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TitleTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemTitle" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemSubtitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CaptionTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        </Grid>
</common:LayoutAwarePage>
